<template>
  <el-table-column v-if="!column.children || column.children.length === 0" :prop="column.id" align="center">
    <template #header>
      <div class="table-column-header">
        {{ column.indexName }}
        <div class="btns" v-if="!isShow">
          <el-tooltip content="添加子列" placement="top">
            <el-icon class="cursor" :size="20" color="#67C23A" @click="handleAdd(column)"><Plus /></el-icon>
          </el-tooltip>
          <el-tooltip content="编辑列" placement="top">
            <el-icon class="cursor" style="margin-left: 10px" :size="20" color="#409EFF" @click="handleEdit(column)">
              <Edit />
            </el-icon>
          </el-tooltip>
          <el-tooltip content="添加条件" placement="top" v-if="!column.children || column.children.length === 0">
            <el-icon
              class="cursor"
              style="margin-left: 10px"
              :size="20"
              :color="column.condition ? '#409EFF' : '#888'"
              @click="handleAddCondition(column)"
            >
              <Filter />
            </el-icon>
          </el-tooltip>
          <el-tooltip content="删除列" placement="top">
            <el-icon class="cursor" style="margin-left: 10px" :size="20" color="red" @click="handleDel(column)">
              <Delete />
            </el-icon>
          </el-tooltip>
        </div>
      </div>
    </template>
    <!-- <template #default="scope">
      <span>
        <el-tooltip content="添加条件" placement="top">
          <el-icon
            class="cursor"
            style="margin-left: 10px"
            :size="20"
            color="#888"
            @click="handleItemCondition(scope.row, scope.$index, scope)"
          >
            <Filter />
          </el-icon>
        </el-tooltip>
      </span>
    </template> -->
  </el-table-column>
  <el-table-column v-else :prop="column.id" align="center">
    <template #header>
      <div class="table-column-header">
        {{ column.indexName }}
        <div class="btns" v-if="!isShow">
          <el-tooltip content="添加子列" placement="top">
            <el-icon class="cursor" :size="20" color="#67C23A" @click="handleAdd(column)"><Plus /></el-icon>
          </el-tooltip>
          <el-tooltip content="编辑列" placement="top">
            <el-icon class="cursor" style="margin-left: 10px" :size="20" color="#409EFF" @click="handleEdit(column)">
              <Edit />
            </el-icon>
          </el-tooltip>
          <el-tooltip content="添加条件" placement="top" v-if="!column.children || column.children.length === 0">
            <el-icon
              class="cursor"
              style="margin-left: 10px"
              :size="20"
              :color="column.condition ? '#409EFF' : '#888'"
              @click="handleAddCondition(column)"
            >
              <Filter />
            </el-icon>
          </el-tooltip>
          <el-tooltip content="删除列" placement="top">
            <el-icon class="cursor" style="margin-left: 10px" :size="20" color="red" @click="handleDel(column)">
              <Delete />
            </el-icon>
          </el-tooltip>
        </div>
      </div>
    </template>
    <template v-if="column.children">
      <tableColumn
        v-for="item in column.children"
        :key="item.id"
        :column="item"
        :isShow="isShow"
        @add="handleAdd"
        @edit="handleEdit"
        @delete="handleDel"
        @condition="handleAddCondition"
        @itemCondition="handleItemCondition"
      />
    </template>
  </el-table-column>
</template>
<script>
export default {
  name: 'tableColumn'
}
</script>
<script setup>
import { CirclePlus, CircleClose, Delete, Plus, Edit, Filter } from '@element-plus/icons-vue'
const emit = defineEmits(['add', 'edit', 'delete', 'condition', 'itemCondition'])
const props = defineProps({
  column: {
    type: Object,
    default: () => ({})
  },
  isShow: {
    type: Boolean,
    default: false
  }
})
const handleAdd = (column) => {
  emit('add', column)
}
const handleEdit = (column) => {
  emit('edit', column)
}
const handleDel = (column) => {
  emit('delete', column)
}
const handleAddCondition = (column) => {
  emit('condition', column)
}
const handleItemCondition = (row, index, scope) => {
  emit('itemCondition', row, index, scope)
}
</script>

<style lang="scss" scoped>
.table-column-header {
  position: relative;
  .btns {
    position: absolute;
    right: 0;
    top: 0;
  }
}
.cursor {
  cursor: pointer;
}
</style>
